<template>
  <div>
      <el-container>
          <div>
              <NavList msg='导航菜单' @getMsg='handermsg' :isCollapse='isCollapse'></NavList>
          </div>
          <el-container>
              <el-header>
                  <i class="el-icon-menu" @click="isCollapse=!isCollapse"></i>
                  <a href='javascrip:;' style="float:right;margin:0px 30px;" @click="cancel">注销</a>
                  <span style="float:right">欢迎您：{{username}}</span>
              </el-header>
              <el-main>
                  <router-view></router-view>
              </el-main>
          </el-container>
      </el-container>
  </div>
</template>

<script>
//导入 需要的子组件
import NavList from '@/components/layout/NavList'
export default {
    components:{
        //组件与标签的映射
        NavList
    },
    data(){
        return{
            isCollapse:false,
            username:sessionStorage.getItem('username')
        }
    },
    methods:{
        handermsg(data){
            alert(data)
        },
        cancel(){
            sessionStorage.clear()
        }
    },
    created(){

    }
}
</script>

<style>
    .el-aside{
        height: 1000px;
        background-color: blue;
    }
    .el-header{
        background-color:coral;
        line-height: 60px;

    }
    body{
        margin: 0PX;
    }
</style>